<template>
  <view class="index">
    <!-- 搜索开始 -->
    <search></search>
    <!-- 搜索结束 -->

    <!-- 轮播图开始 -->
    <u-swiper border-radius="0" :list="swiperList" name="image_src" height="340" interval="2000"></u-swiper>
    <!-- 轮播图结束 -->

    <!-- 导航开始 -->
    <view class="nav u-flex">
      <navigator class="navList u-flex-1 u-p-15" v-for="item in navList" :key="item.name">
        <u-image mode="widthFix" :src="item.image_src"></u-image>
      </navigator>

    </view>
    <!-- 导航结束 -->

    <!-- 楼层开始 -->
    <view class="floor">
      <view class="floor-group" v-for="item1 in floorList" :key="item1.floor_title.name">
        <!-- 标题开始 -->
        <view class="floor-group-title u-m-t-30">
          <u-image  mode="widthFix" :src="item1.floor_title.image_src"></u-image>
        </view>
        <!-- 标题结束 -->
        <!-- 内容开始 -->
        <view class="floor-group-content">
          <navigator
            v-for="item2 in item1.product_list"
            :key="item2.name"

          >
            <u-image
              :src="item2.image_src"
              mode="scaleToFill"
              width="100%"
              height="100%"
            ></u-image>
          </navigator>
        </view>
        <!-- 内容结束 -->
        
      </view>
    </view>
    <!-- 楼层结束 -->

  </view>
</template>

<script>
import search from '../../components/search/search.vue';
export default {
  components: { search },
	data() {
		return {
      swiperList:[],
      navList:[],
      floorList:[]
    }
	},
  onLoad(){
    //获取轮播图数据
    this.getSwiperList()
    //获取导航数据
    this.getNavList()
    //获取楼层数据
    this.getFloorList()
  },
	methods: {
		//获取轮播图数据
    async getSwiperList(){
      
      // const [err,res] = await uni.request({
      //   url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
      //   method:'GET'
      // })
      // if(!err){
      //   // console.log('获取成功');
      //   // console.log(res);
      //   this.swiperList = res.data.message
      // }
      // else{
      //   console.log('获取失败');
      // }
      this.swiperList = await this.$u.get('/home/swiperdata')
      // console.log(this.swiperList);
    },
    //获取导航数据
    async getNavList(){
      // const [err,res] = await uni.request({
      //   url:'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
      //   method:'GET'
      // })

      // if(!err){

      //   this.navList = res.data.message
      // }else{
      //   console.log('获取失败');
      this.navList = await this.$u.get('/home/catitems')
      // }
    },
    //获取楼层数据
    async getFloorList(){
      // const [err,res] = await uni.request({
      //   url:'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
      //   method:'GET'
      // })

      // if(!err){

      //   this.floorList = res.data.message
      // }else{
      //   console.log('获取失败');
      // }
      this.floorList = await this.$u.get('/home/floordata')

    }
	},
	// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		// this.$refs.uForm.setRules(this.rules);
	}
};
</script>

<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	/* @import "uview-ui/index.scss"; */

.floor {
  .floor-group-content {
    /* 清除浮动 */
    overflow: hidden;
    navigator {
      float: left;
      background-color: yellow;
      margin-left: 13rpx;
    }
    /* 第一个导航标签 设置 232 * 386 */
    navigator:first-child {
      width: 232rpx;
      height: 386rpx;
    }

    /* 后四个导航标签 */
    navigator:nth-last-child(-n + 4) {
      width: 233rpx;
      height: 188rpx;
    }
    /* 后2个导航标签 */
    navigator:nth-last-child(-n + 2) {
      margin-top: 10rpx;
    }
  }
}
</style>
